<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- tab info popup -->
<div class="ddp-wrap-tab-popup" *ngIf="isShow">
  <div class="ddp-ui-tab-popup">
    <div class="ddp-ui-title">
      {{'msg.space.ui.shared.member.title' | translate}}
      <label *ngIf="isManageMember" class="ddp-label-checkbox ddp-type2">
        <input type="checkbox" [checked]="workspace.published" (click)="toggleWorkspacePublished()">
        <i class="ddp-icon-checkbox"></i>
        <span class="ddp-txt-checkbox">{{'msg.space.ui.allow.all.member'|translate}}</span>
      </label>
      <a href="javascript:" *ngIf="isManageMember" class="ddp-link-setting" (click)="close(true)">
        <em class="ddp-icon-setting"></em>{{'msg.space.btn.setting' | translate}}
      </a>
    </div>
    <!-- box -->
    <div class="ddp-box-tab-popup">
      <!-- left -->
      <div class="ddp-ui-left">
        <!-- share member -->
        <div class="ddp-ui-member-table" >
          <div *ngIf="!isGuest" class="ddp-box-viewtable2" style="top:0px">
            <!-- head -->
            <div class="ddp-ui-gridhead2">
              <table class="ddp-table-form2">
                <colgroup>
                  <col width="*">
                  <col width="25%">
                  <col width="25%">
                </colgroup>
                <thead>
                <tr>
                  <th> {{'msg.comm.th.usr.name' | translate}} </th>
                  <th> {{'msg.comm.th.full.name' | translate}} </th>
                  <th> {{'msg.comm.th.role' | translate}} </th>
                </tr>
                </thead>

              </table>
            </div>
            <!-- //head -->
            <!-- body -->
            <div class="ddp-ui-gridbody2">
              <table class="ddp-table-form2">
                <colgroup>
                  <col width="*">
                  <col width="25%">
                  <col width="25%">
                </colgroup>
                <tbody>
                <tr *ngFor="let userInfo of users">
                  <td>
                    <img [src]="getProfileImage(userInfo.member)" class="ddp-data-photo"/>
                    {{userInfo.member.username}}
                  </td>
                  <td> {{userInfo.member.fullName}} </td>
                  <td><span>{{userInfo.role}}</span></td>
                </tr>
                </tbody>
              </table>

            </div>
            <!-- //body -->
          </div>
          <!-- 더보기 -->
          <div *ngIf="!isGuest && isDisplayBtnUserMore" class="ddp-ui-moretype">
            <a (click)="getUserMore()" href="javascript:" class="ddp-btn-moretype">{{'msg.comm.ui.more' | translate}}</a>
          </div>
          <!-- //더보기 -->
        </div>
        <!-- //share member -->

      </div>
      <!-- //left -->
      <!-- right -->
      <div class="ddp-ui-right">

        <!-- share member -->
        <div class="ddp-ui-member-table" >
          <div *ngIf="!isGuest" class="ddp-box-viewtable2" style="top:0px">
            <!-- head -->
            <div class="ddp-ui-gridhead2">
              <table class="ddp-table-form2">
                <colgroup>
                  <col width="*">
                  <col width="25%">
                </colgroup>
                <thead>
                <tr>
                  <th>
                    {{'msg.comm.th.grp.name' | translate}}
                  </th>
                  <th>
                    {{'msg.comm.th.role' | translate}}
                  </th>
                </tr>
                </thead>

              </table>
            </div>
            <!-- //head -->
            <!-- body -->
            <div class="ddp-ui-gridbody2">
              <table class="ddp-table-form2">
                <colgroup>
                  <col width="*">
                  <col width="25%">
                </colgroup>
                <tbody>
                <tr *ngFor="let groupInfo of groups">
                  <td>
                    <em class="ddp-icon-group"></em>
                    {{groupInfo.member.name}}
                  </td>
                  <td><span>{{groupInfo.role}}</span></td>
                </tbody>
              </table>

            </div>
            <!-- //body -->
          </div>
          <!-- 더보기 -->
          <div *ngIf="!isGuest && isDisplayBtnGroupMore" class="ddp-ui-moretype">
            <a (click)="getGroupMore()" href="javascript:" class="ddp-btn-moretype">{{'msg.comm.ui.more' | translate}}</a>
          </div>
          <!-- //더보기 -->
        </div>
        <!-- //share member -->
      </div>
      <!-- right -->


    </div>
    <!-- //box -->
    <div class="ddp-popup-tabbottom">
      <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black" (click)="close(false)"> {{'msg.comm.btn.close' | translate}} </a>
    </div>
  </div>
</div>
<!-- //tab info popup -->
